<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身房预约系统</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script src="../static/js/bootstrap.min.js"></script>
    <style>
        html{
          height: 100%;
        }

        ul li {
            list-style: none;
        }
        .custom-class {
            padding: 20px;
        }
        .custom-row {
            height: 600px;
        }
        .custom-row-left {
            height: 1200px;
        }
        .container {
            max-width: 1920px;
        }
        .card-flex {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            height: 100%;
        }
        
        .scroll-container {
            overflow: auto; /* 设置容器的overflow属性为auto或scroll */
            display: flex; /* 将容器设置为flex容器 */
            flex-direction: column; /* 设置容器的主轴方向为垂直方向 */
            align-items: flex-start; /* 设置容器中的内容向上对齐 */
        }
        
        .list-group-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .custom-font-size_large {
            font-size: 14px;
            line-height: 1.0;
            margin-top: 3px;
            margin-bottom: 3px;
        }
        .custom-font-size_mid {
            font-size: 12px;
            line-height: 1.0;
            margin-top: 3px;
            margin-bottom: 3px;
        }
        .custom-font-size-small {
            font-size: 9px;
            line-height: 1.0;
            margin-top: 3px;
            margin-bottom: 3px;
        }
        .custom-row {
            padding-bottom: 15px;
        }
        .btn-success {
            width: 64px;
        }         
    </style>
</head>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="">健身房预约系统</a>
            <div>
                <button type="button"  class="btn btn-link">
                    <a href="{{ url_for('logout') }}">退出登录</a>
                </button>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                
            </div>
            
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ url_for('index') }}">系统主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="{{ url_for('order') }}">预约中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('mine') }}">个人中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('search') }}">搜索课程</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            帮助
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="{{ url_for('regulation') }}">规章制度</a></li>
                    </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="custom-class">
        <div class="row custom-class">
            <div class="jumbotron">
                <h1>Hello, {{user.student_name}}!</h1>
                <p>欢迎来到健身房.</p>
            </div>
        </div>
        <div class="container  custom-class">
            <div class="row">
                <div class="col-2 custom-row-left" style="width=400px">
                    <div class="card card-flex">
                        <div class="card-header">
                            最新公告
                            <a class="custom-font-size-small" href="">more</a>
                        </div>
                        <div class="scroll-container">
                            <ul class="list-group list-group-flush">
                                {% for item in announcements %}
                                <li class="list-group-item">
                                    <h6>{{ item.announcement_title }}</h5>
                                    <p class="custom-font-size_large">{{ item.announcement_detail }}</p>
                                    <p class="custom-font-size-small">{{ item.announcement_date }}</p>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-10">
                    <div class="container">
                        <div class="row custom-row">
                            
                            <div class="col-xs-12 col-sm-5  custom-row">
                                <div class="card card-flex">
                                    <div class="card-header">
                                        推荐课程
                                        <a class="custom-font-size-small" href="">more</a>
                                    </div>
                                    <div class="scroll-container" style="overflow: hidden;">
                                        <!-- 这里放置需要滚动的内容 -->
                                        <ul class="list-group list-group-flush">
                                            {% for item in notices %}
                                            <li class="list-group-item">
                                                <a href="{{ item.notice_url }}">{{ item.notice_title }}</a>
                                                <p style="font-size: 12px;">{{ item.notice_detail }}</p>
                                                <img src="{{ item.notice_image }}" alt="{{ item.notice_title }}" style="max-width: 100%; height: auto;">
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-3 custom-row">
                                <div class="card card-flex">
                                    <div class="card-header">
                                        器材展示
                                        <a class="custom-font-size-small" href="">more</a>
                                    </div>
                                    <div class="scroll-container" style="overflow: hidden;">
                                        <!-- 这里放置需要滚动的内容 -->
                                        <ul class="list-group list-group-flush">
                                            {% for item in tools %}
                                            <li class="list-group-item">
                                                <a href="{{ tools.url }}">{{ item.title }}</a>
                                                <p style="font-size: 12px;">{{ item.detail }}</p>
                                                <img src="{{ item.image }}" alt="{{ item.title }}" style="max-width: 100%; height: auto;">
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xs-12 col-sm-4 custom-row">
                                <div class="card card-flex">
                                    <div class="card-header">
                                        课程表
                                        <a class="custom-font-size-small" href="">more</a>
                                    </div>
                                    <div class="scroll-container">
                                        <table class="table custom-font-size-small">
                                            <thead>
                                                <tr>
                                                    <th>课程名称</th>
                                                    <th>地点</th>
                                                    <th>座位号</th>
                                                    <th>日期</th>
                                                    <th>状态</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for mi_app in mine_appointment %}
                                                <tr>
                                                    <td style="vertical-align: middle;">{{ mi_app[1] }}</td>
                                                    <td style="vertical-align: middle;">{{ mi_app[2] }}</td>
                                                    <td style="vertical-align: middle;">{{ mi_app[3] }}</td>
                                                    <td style="vertical-align: middle;">{{ mi_app[4] }}</td>
                                                    <td style="vertical-align: middle;">
                                                        <button id="btn-{{ mi_app[0] }}" type="button" class="btn btn-success custom-font-size-small" onclick="updateButtonStatus({{ mi_app[0] }})" style="vertical-align: middle;">{% if mi_app[5] == 0 %}签到{% elif mi_app[5] == 1 %}已签到{% endif %}</button>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <div class="row custom-row">
                            <div class="col-xs-12 col-sm-9 custom-row">
                                <div class="card card-flex">
                                    <div class="card-header">
                                        特色课程推荐
                                        <a class="custom-font-size-small" href="">more</a>
                                    </div>
                                    <div class="scroll-container" style="overflow: hidden;">
                                        <ul class="list-group list-group-flush">
                                            {% for item in coaches %}
                                            <li class="list-group-item">
                                                <h5>{{ item.name }}</h5>
                                                <img src="{{ item.image }}" alt="{{ item.name }}">
                                                <p>性别：{{ item.gender }}</p>
                                                <p>年龄：{{ item.age }}</p>
                                                <p>教龄：{{ item.teaching_years }}</p>
                                                <p>特长：{{ item.specialty }}</p>
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-3 custom-row">
                                <div class="card card-flex">
                                    <div class="card-header">
                                        教练介绍
                                        <a class="custom-font-size-small" href="">more</a>
                                    </div>
                                    <div class="scroll-container">
                                        <ul class="list-group list-group-flush">
                                            {% for item in coaches %}
                                            <li class="list-group-item">
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-6">
                                                        <p class="custom-font-size_large">{{ item.name }}</h5>
                                                        <p class="custom-font-size_mid" style="margin-top: 8px">性别：{{ item.gender }}</p>
                                                        <p class="custom-font-size_mid" style="margin-top: 8px">年龄：{{ item.age }}</p>
                                                        <p class="custom-font-size_mid" style="margin-top: 8px">教龄：{{ item.teaching_years }}</p>
                                                        <p class="custom-font-size_mid" style="margin-top: 8px">特长：{{ item.specialty }}</p>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-6">
                                                        <img src="{{ item.image }}" alt="{{ item.name }}" style="max-width: 100%; height: auto;">
                                                    </div>
                                                    
                                                </div>
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                        </div> 
                    </div>
                </div>
            </div>
            
            
        </div>
        <script>
            function updateButtonStatus(appointmentId) {
                var button = document.getElementById("btn-" + appointmentId);
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var response = JSON.parse(xhr.responseText);
                        if (response.status == 0) {
                            button.innerHTML = "签到";
                            button.disabled = false;
                        } else if (response.status == 1) {
                            button.innerHTML = "已签到";
                            button.disabled = true;
                        }
                    }
                };
                xhr.open("POST", "/get_status", true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send("appointment_id=" + appointmentId);
            }
        </script>
        
</body>
</html>